@use './_functions.scss' as *;
@use './_vars.scss' as *;

.relative {
    position: relative;
}

.px-2 {
    padding-left: px2vmin(2);
    padding-right: px2vmin(2);
}

.px-3 {
    padding-left: px2vmin(3);
    padding-right: px2vmin(3);
}

.px-4 {
    padding-left: px2vmin(4);
    padding-right: px2vmin(4);
}

.px-15 {
    padding-left: px2vmin(15);
    padding-right: px2vmin(15);
}

.pl-15 {
    padding-left: px2vmin(15);
}

.pr-15 {
    padding-right: px2vmin(15);
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.m-15 {
    margin: px2vmin(15)
}

.z-10 {
    z-index: 10;
}

.flex {
    display: flex;
}

.border-box {
    box-sizing: border-box;
}

.justify-center {
    justify-content: center;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.w-0 {
    width: 0;
}

.h-100-percent {
    height: 100%;
}

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.h-full-vh {
    height: 100vh;
}

.w-full-vw {
    width: 100vw;
}

.bg-red {
    background-color: rgb(250, 181, 181);
}

.bg-green {
    background-color: rgb(146, 202, 146);
}

.bg-orange {
    background-color: rgb(227, 201, 152);
}

.bg-pink {
    background-color: rgb(144, 105, 110);
}

.bg-blue {
    background-color: rgb(122, 122, 245);
}

.bg-cyan {
    background-color: rgb(166, 233, 233);
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.mb-2 {
    margin-bottom: px2vmin(2);
}

.mb-4 {
    margin-bottom: px2vmin(4);
}

.align-center {
    align-items: center;
}

.text-red {
    color: rgb(250, 181, 181);
}

.safety-padding-bottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.safety-padding-left {
    padding-left: var(--safeAreaInsetLeft, 0px);
}

.margin-left-auto {
    margin-left: auto;
}

.bg-white {
    background-color: #fff;
}

.mt-4 {
    margin-top: px2vmin(4);
}

.mt-15 {
    margin-top: px2vmin(15);
}

.ml-15 {
    margin-left: px2vmin(15);
}

.mb-15 {
    margin-bottom: px2vmin(15);
}

.pt-15 {
    padding-top: px2vmin(15);
}

.py-15 {
    padding-top: px2vmin(15);
    padding-bottom: px2vmin(15);
}

.px-15 {
    padding-left: px2vmin(15);
    padding-right: px2vmin(15);
}

.p-15 {
    padding-top: px2vmin(15);
    padding-bottom: px2vmin(15);
    padding-left: px2vmin(15);
    padding-right: px2vmin(15);
}